<template>
  <div id='supplier_detail'>
    <div class="container">
      <RadioGroup v-model="btnValue" type="button" style="margin: 30px 0" @on-change='onChange'>
        <Radio label="1">基本信息</Radio>
        <Radio label="2">商品信息</Radio>
        <Radio label="3">操作日志</Radio>
      </RadioGroup>
      <div class="detail-table" v-show="btnValue === '1'">
        <Row>
          <Col span="12" class="detail-table__col"> 供应商缩写：{{detailObj.suppNameShorten}}</Col>
          <Col span="12" class="detail-table__col"> 供应商名称：{{detailObj.suppName}}</Col>
        </Row>
        <Row>
          <Col span="12" class="detail-table__col"> 所属部门：{{detailObj.orgTagName}}</Col>
          <Col span="12" class="detail-table__col"> 采购员：{{detailObj.buyer ? detailObj.buyer.split(';')[0] : ''}}</Col>
        </Row>
        <Row>
          <Col span="12" class="detail-table__col"> 法人代表：{{detailObj.legalRepresenter}}</Col>
          <Col span="12" class="detail-table__col"> 工商登记号：{{detailObj.busiRegisNum}}</Col>
        </Row>
        <Row>
          <Col span="12" class="detail-table__col"> 税务登记号：{{detailObj.taxRegisNum}}</Col>
          <Col span="12" class="detail-table__col"> 注册资金：{{detailObj.regisCapital}}万</Col>
        </Row>
        <Row>
          <Col span="12" class="detail-table__col"> 注册地址：{{detailObj.regisAddr}}</Col>
          <Col span="12" class="detail-table__col"> 邮箱：{{detailObj.foxmail}}</Col>
        </Row>
        <Row>
          <Col span="12" class="detail-table__col"> 联系人：{{detailObj.contacter}}</Col>
          <Col span="12" class="detail-table__col"> 联系电话：{{detailObj.contactPhone}}</Col>
        </Row>
        <Row>
          <Col span="12" class="detail-table__col"> 票面税率：{{detailObj.nominalTaxrate}}</Col>
          <Col span="12" class="detail-table__col"> 最小起订金额：{{detailObj.miniOrderMoney}}</Col>
        </Row>
        <Row>
          <Col span="12" class="detail-table__col">
            <table>
              <tr>
                <td width="40" style="text-align: left;" valign="top">备注：</td>
                <td style="word-break: break-all;">{{detailObj.remarks}}</td>
              </tr>
            </table>
          </Col>
          <Col span="12" class="detail-table__col"> 状态：{{detailObj.displayFlag === 1 ? '显示': detailObj.displayFlag === 0 ? '隐藏': ''}}</Col>
        </Row>
      </div>
      <div v-if="btnValue === '2' || btnValue === '3'">
        <div v-show="btnValue === '2'">
          <Table :columns="columnsProduct" :data="tableProductData" :height='tableHeight'>
            <template slot-scope="{ row }" slot="thumbnail">
              <div style="padding: 15px 0;width: 90px;">
                <img :src="row.thumbnail" alt="" style="display: block;width: 90px;height:60px;">
              </div>
            </template>
            <template slot-scope="{ row }" slot="classify">
              <span>{{row.parentCategoryName}} - {{row.categoryName}}</span>
            </template>
          </Table>
        </div>
        <div v-show="btnValue === '3'">
          <Table :columns="columnsLog" :data="tableLogData" :height='tableLogHeight'></Table>
        </div>
        <Row type='flex' justify="end" style='padding: 20px 0'>
          <Col>
            <Page :total="btnValue === '2' ? productObj.total : btnValue === '3' ? logObj.total : 0"
                  :page-size="btnValue === '2' ? productObj.pageSize : btnValue === '3' ? logObj.pageSize : 10"
                  :current="btnValue === '2' ? productObj.pageIndex : btnValue === '3' ? logObj.pageIndex : 1"
                  show-total
                  show-sizer
                  @on-change='changePageIndex'
                  @on-page-size-change='changePageSize' />
          </Col>
        </Row>
      </div>
    </div>
  </div>
</template>

<script>
import { supplierDetail, supplierLog, supplierProductList } from '@/api/purchase/index'
export default {
  name: 'supplier_detail',
  computed: {
    tableHeight () {
      let height = this.tableProductData.length > 5 ? 520 : 0
      return height
    },
    tableLogHeight () {
      let height = this.tableLogData.length > 10 ? 520 : 0
      return height
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (vm.supplierId !== to.params.id) {
        vm.supplierId = to.params.id
        vm.btnValue = '1'
        vm.getDetail()
      }
    })
  },
  data () {
    return {
      supplierId: '',
      btnValue: '1',
      detailObj: {},
      tableLogData: [],
      tableProductData: [],
      logObj: {
        total: 0,
        pageIndex: 1,
        pageSize: 10
      },
      productObj: {
        total: 0,
        pageIndex: 1,
        pageSize: 10
      },
      columnsProduct: [
        {
          title: '商品图片',
          slot: 'thumbnail'
        },
        {
          title: '商品名称',
          key: 'skuName'
        },
        {
          title: '商品条码',
          key: 'barcode'
        },
        {
          title: '分类',
          slot: 'classify'
        },
        {
          title: '含税单价',
          key: 'standardPrice'
        }
      ],
      columnsLog: [
        {
          title: '操作者',
          key: 'operatorName'
        },
        {
          title: '操作时间',
          key: 'operTime'
        },
        {
          title: '日志记录',
          key: 'operation'
        }
      ]
    }
  },
  methods: {
    changePageIndex (index) {
      if (this.btnValue === '2') {
        this.productObj.pageIndex = index
        this.getProductList()
      } else if (this.btnValue === '3') {
        this.logObj.pageIndex = index
        this.getLog()
      }
    },
    changePageSize (size) {
      if (this.btnValue === '2') {
        this.productObj.pageSize = size
        this.productObj.pageIndex = 1
        this.getProductList()
      } else if (this.btnValue === '3') {
        this.logObj.pageSize = size
        this.logObj.pageIndex = 1
        this.getLog()
      }
    },
    onChange () {
      if (this.btnValue === '2') {
        this.getProductList()
      } else if (this.btnValue === '3') {
        this.getLog()
      }
    },
    // 获取商品信息列表
    getProductList () {
      supplierProductList({
        merchantId: this.$store.state.user.merchantId,
        supplierId: this.supplierId,
        goodsStatus: '1',
        categoryId: '',
        sortBy: '', // ASC :升序 DESC :降序
        keyword: '',
        offset: this.productObj.pageSize * (this.productObj.pageIndex - 1),
        limit: this.productObj.pageSize
      }).then(res => {
        const result = res.data || {}
        if (result.status === 200) {
          this.tableProductData = result.data.goods || []
          this.productObj.total = result.data.total
        } else {
          this.$Message.error(result.error || result.message)
        }
      }).catch(err => {
        this.$Message.error(`${err}`)
      })
    },
    // 获取操作日志
    getLog () {
      supplierLog({
        merchantId: this.$store.state.user.merchantId,
        supplierId: this.supplierId,
        offset: this.logObj.pageSize * (this.logObj.pageIndex - 1),
        limit: this.logObj.pageSize,
        displayOrder: 1
      }).then(res => {
        const result = res.data || {}
        if (result.status === 200) {
          this.tableLogData = result.data.records || []
          this.logObj.total = result.data.total
        } else {
          this.$Message.error(result.error || result.message)
        }
      }).catch(err => {
        this.$Message.error(`${err}`)
      })
    },
    getDetail () {
      supplierDetail({
        merchantId: this.$store.state.user.merchantId,
        supplierId: this.supplierId
      }).then(res => {
        const result = res.data || {}
        if (result.status === 200) {
          this.detailObj = result.data
        } else {
          this.$Message.error(result.error || result.message)
        }
      })
    }
  },
  mounted () {
    this.supplierId = this.$route.params.id
    this.getDetail()
  }
}
</script>

<style lang="less">
@import '~@/assets/stylus/detail-table.less';
#supplier_detail{
  padding: 0 100px;
  .container {
    margin: 20px 0;
  }
  .ivu-radio-group-button .ivu-radio-wrapper-checked {
    background: #2d8cf0;
    color: #fff;
  }
}
</style>
